<template>
    <div class="teaching-look w-100">
        <el-card class="box-card-table h-100" shadow="never">
            <div slot="header" class="clearfix">
                <span class="fl">查看教学计划</span>
                <el-button class="fr" @click="goback" style="padding:6px;">返回</el-button>
            </div>
            <div class="h-100">
                <div>
                    <h3 class="t-c" style="font-size:20px;height:50px;line-height:50px; ">
                        {{ruleForm.bTC_Name}}
                    </h3>
                </div>
                <el-form :model="ruleForm"  ref="ruleForm" label-width="100px" >
                    <el-form-item label="学生：" prop="bSID">
                        <span>{{ruleForm.bSID | getStudyName(studyList)}}</span>
                    </el-form-item>
                    <el-form-item label="教师：" prop="bTID">
                        <span>{{ruleForm.bTID | getTeacherName(teacherList)}}</span>
                    </el-form-item>
                    
                    <el-form-item label="教案详情：" prop="bTC_Content">
                        <div style="line-height:30px;" v-html="ruleForm.bTC_Content"></div>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
import elewarp from '@/components/warp-slot.vue'
import {getCenterInfo} from '@/api/index.js'

export default {
    name: 'teaching',
    components: {
        elewarp,
        // eleAddStudy
    },
    data() {
        return {
            ruleForm:{
                bTC_Name:'',	
                bSID:'',
                bTID:'',	
                bTC_Content:''
            },
            week:[]
        }
    },
    filters:{
        getStudyName(val,data) {
            for (let i = 0; i < data.length; i++) {
                if(val == data[i].SID){
                    return data[i].SName;
                }
            }
            return '未知'
        },
        getTeacherName(val,data) {
            for (let i = 0; i < data.length; i++) {
                if(val == data[i].TID){
                    return data[i].T_Name;
                }
            }
            return '未知'
        }
    },
    computed:{
        rowvalue(){
            return this.week.length + 2
        },
        teacherList() {
            return this.$store.state.allTeacherList;
        },
        studyList() {
            return this.$store.state.allStudyList;
        }
    },
    created() {
        this.centerid = this.$route.query.id;
        if(this.centerid) {
            this._getCenterInfo();
        }
    },
    methods:{
        _getCenterInfo(){
            getCenterInfo({bTCID:this.centerid}).then((res) => {
                if(res) {
                    console.log(res)
                    for (const key in this.ruleForm) {
                        if (this.ruleForm.hasOwnProperty(key)) {
                            let _key = key.substr(1);
                            if( _key in res) {
                                this.ruleForm[key] = res[_key];
                            }
                        }
                    }
                }
            })
        },
        goback(){
            this.$router.push({path:'/center/center-list'})
        }
    }
}
</script>
<style lang="less">
.teaching-look{
    min-height: 100%;
}
.plan-list{
    th{
        background-color: #F5F7FA;
        line-height: 40px;
    }
    th,td{
        border:1px solid #ccc;
    }
    td .el-form-item{
        margin-bottom: 0px;
    }
    .week{
        width: 100px;
        .el-icon-close:hover{
            color:red;
        }
    }
    .no-border{
        border-bottom: 0px;
    }
    .btn-tr{
        td{
            border-top:0px;
        }
    }
    .ql-editor{
        min-height: 400px !important;
    }
}
.teaching{
    .el-card__body{
        // height:calc(100% - 70px);
    }
    .box-card-table{
        overflow-y: auto;
        box-sizing: border-box;
    }
}
</style>
